<template>
  <div
    id="pickCustomer"
    class="weui-mask mb-5"
    v-show="show"
    style="overflow: auto"
  >
    <div class="weui-search-bar weui-search-bar_focusing">
      <a
        href="javascript:"
        class="weui-search-bar__cancel-btn text-danger ms-1"
        id="search_cancel"
        @click="cancel()"
        >取消</a
      >
      <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input
            type="search"
            class="weui-search-bar__input"
            v-model="searchWord"
          />
          <a
            href="javascript:"
            class="weui-icon-clear"
            @click.stop="reset()"
          ></a>
        </div>
      </form>
      <a
        href="javascript:void(0)"
        class="weui-search-bar__cancel-btn"
        @click="searchPsg()"
        >查找</a
      >
    </div>

    <ul class="nav nav-tabs bg-faded" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#user" role="tab"
          >已注册用户({{ psgs.length }})</a
        >
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#weixin" role="tab"
          >微信用户({{ subscribers.length }})</a
        >
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="user" role="tabpanel">
        <div class="card col-12 px-0">
          <template v-if="psgs.length > 0">
            <div
              class="card-block py-0 border-bottom-1"
              v-for="(psg, index) in psgs"
            >
              姓名: {{ psg.empname }}
              <span class="float-end mb-2">
                <button
                  type="button"
                  class="btn btn-success btn-sm"
                  @click.stop="selectThisPsg(index)"
                >
                  √
                </button>
              </span>
            </div>
          </template>
          <template v-else-if="searchCount > 0">
            <div class="card-block pb-0 border-bottom-1 text-center">
              <span class="text-danger">未找到符合的注册客户</span>
            </div>
          </template>
        </div>
      </div>
      <div class="tab-pane" id="weixin" role="tabpanel">
        <div class="card col-12 px-0">
          <template v-if="subscribers.length > 0">
            <div
              class="card-block py-0 border-bottom-1"
              v-for="(psg, index) in subscribers"
            >
              昵称: {{ psg.nickname }}
              <span class="float-end mb-2">
                <button
                  type="button"
                  class="btn btn-success btn-sm"
                  @click.stop="selectThisSubscriber(index)"
                >
                  √
                </button>
              </span>
            </div>
          </template>
          <template v-else-if="searchCount > 0">
            <div class="card-block pb-0 border-bottom-1 text-center">
              <span class="text-danger">未找到符合的微信公众号订阅用户</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchCustomers } from "@/api/user.js";
import { searchSubscribers } from "@/api/admin.js";

export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchWord: "",
      searchCount: 0,

      psgs: [],
      subscribers: [],

      customerType: 0,
      name: "",
    };
  },
  watch: {
    show: function (newVal, oldVal) {
      if (newVal) {
        this.reset();
      }
      // console.log('new: %s, old: %s', newVal, oldVal)
    },
  },
  updated: function () {
    // console.log('updated.....')
  },
  methods: {
    cancel: function () {
      this.$emit("close", 0);
    },
    reset: function () {
      this.searchWord = "";
      this.searchCount = 0;
      this.psgs.splice(0);
      this.subscribers.splice(0);
    },
    searchPsg: function () {
      this.searchCount++;

      var searchWord = this.searchWord.toUpperCase();

      var params = { "sc.name": searchWord };

      searchCustomers(
        params,
        (jsonResult) => {
          this.psgs = jsonResult.dataList;
        },
        null,
        null
      );

      params = { "sc.pageNo": 1, "sc.pageSize": 50, "sc.name": searchWord };

      searchSubscribers(params, (jsonResult) => {
        this.subscribers = jsonResult.dataList;
      });
    },
    selectThisPsg: function (index) {
      this.name = this.psgs[index].empname;

      const username = this.psgs[index].username;

      this.$emit("close", 1, { type: 0, name: this.name, username: username });
    },
    selectThisSubscriber: function (index) {
      this.name = this.subscribers[index].nickname;

      const openid = this.subscribers[index].weixinOpenId;

      this.$emit("close", 1, { type: 1, name: this.name, openid: openid });
    },
  },
};
</script>
